function makeInstructions(parent)
{
	var iDiv = document.createElement('div');
	iDiv.style.width = "20%";
	iDiv.style.display = "inline-block";
	iDiv.style.verticalAlign = "top";
	
	var html = "<p>The idea is to move the blocks into the empty slots. Only one block can be pushed at a time.</p><table align='center' width='80%'>";
	var imgDim = {"width" : 50,"height" : 50};
	for(var i in themes[themeInUse])
	{
		html += "<tr> <td>" + i + "</td> <td><img src='" + sprites[i].src + "' width='" + imgDim.width + "px' height='" + imgDim.height + "px'  /></td></tr>";
	}
	html += "</table>"
	iDiv.innerHTML = html;
	var canvas = document.getElementById("canvas");
	canvas.parentNode.removeChild(canvas);
	parent.appendChild(iDiv);
	parent.appendChild(canvas);
}

function makeKey(text)
{
	var key = document.createElement('div');
	key.style.width = "50px";
	key.style.lineHeight = "50px";
	key.style.backgroundImage = "url('images/blank_key.png')";
	key.style.textAlign = "center";
	key.style.display = "inline-block";
	key.innerHTML = text;
	
	return key;
}
	

function makeControls(parent)
{
	var cDiv = document.createElement('div');
	cDiv.style.width = "20%";
	cDiv.style.display = "inline-block";
	cDiv.style.verticalAlign = "top";
	cDiv.style.paddingLeft = "10px";
	
	cDiv.innerHTML = "<p> Use the following controls </p><br />";
	var keys =
	{
		"Up" : "Move up",
		"Down" : "Move down",
		"Left" : "Move left",
		"Right" : "Move right",
		"Q" : "Toggle Layout (portrait/landscape)",
		"U" : "Undo",
		"R" : "Redo",
		"S" : "Restart Level"
	};
	
	for(var i in keys)
	{
		cDiv.appendChild(makeKey(i));
		cDiv.innerHTML += "   " + keys[i] + "<br /><br />";
	}
	
	parent.appendChild(cDiv);
}

function canvasWidth()
{
	var totalWidth = document.body.clientWidth;
	return parseInt(0.6 * totalWidth) - 25;
}